<template>
  <div class="roleManagement-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button
          v-has="hasButtons.addbutton"
          icon="el-icon-plus"
          type="primary"
          @click="handleEdit('create')"
        >
          添加
        </el-button>
        <!--<el-button icon="el-icon-delete" type="danger" @click="handleDelete">
          批量删除
        </el-button>-->
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="12">
        <el-form :inline="true" :model="queryParam" @submit.native.prevent>
          <el-form-item>
            <el-input
              v-model.trim="queryParam.dictName"
              placeholder="请输入字典名称"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table
      ref="tableSort"
      v-loading="listLoading"
      :data="dataSource"
      :element-loading-text="elementLoadingText"
      border
      @selection-change="setSelectRows"
    >
      <!--<el-table-column show-overflow-tooltip type="selection"></el-table-column>-->

      <el-table-column
        v-for="(value, key, index) in dict"
        :key="index"
        :prop="key"
        :label="value"
        align="center"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        v-if="
          global_checkBtnPermission([
            hasButtons.editbutton,
            hasButtons.dictsetting,
            hasButtons.deletebutton,
          ])
        "
        align="center"
        show-overflow-tooltip
        width="400"
        label="操作"
      >
        <template #default="{ row }">
          <el-button
            v-has="hasButtons.editbutton"
            size="mini"
            type="primary"
            icon="el-icon-edit"
            plain
            @click="handleEdit(row)"
          >
            编辑
          </el-button>
          <el-button
            v-has="hasButtons.dictsetting"
            size="mini"
            type="primary"
            icon="el-icon-setting"
            plain
            @click="handleSetting(row)"
          >
            字典设置
          </el-button>
          <el-button
            v-has="hasButtons.deletebutton"
            size="mini"
            type="danger"
            icon="el-icon-delete"
            plain
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="ipagination.page"
      :page-size="ipagination.limit"
      :layout="layout"
      :total="ipagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <edit ref="edit" @fetch-data="submitForm"></edit>
    <dict-item-list ref="dictItemList"></dict-item-list>
  </div>
</template>

<script>
  import Edit from './components/DictManagementEdit'
  import dictItemList from './components/DictItemList'
  import { BaseListMixin } from '@/mixins/BaseListMixin'

  const dict = {
    dictName: '字典名称',
    dictCode: '字典编号',
    description: '描述',
  }
  const hasButtons = {
    deletebutton: 'sys:dict:delete',
    dictsetting: 'dictSetting',
    addbutton: 'sys:dict:add',
    editbutton: 'sys:dict:edit',
  }
  export default {
    name: 'DictManagement',
    components: { Edit, dictItemList },
    mixins: [BaseListMixin],
    data() {
      return {
        hasButtons: hasButtons,
        dict: dict,
        url: {
          listPage: '/presoftasim/system/dict/listPage',
          delete: '/presoftasim/system/dict/delete',
          create: '/presoftasim/system/dict/create',
          update: '/presoftasim/system/dict/update',
        },
      }
    },
    methods: {
      handleSetting(row) {
        this.$refs.dictItemList.handleItemEdit(row)
      },
    },
  }
</script>
